<template>
  <div class="container upTeachDetails">
    <div class="header-wrap">
      <el-row class="tabNav marBtm">
        <el-col style="width: 120px;line-height: 60px;">
          <el-button @click="onBack">返回上一步</el-button>
        </el-col>
        <el-col :span="12" class="waysWrap win-atuo">
          <div class="flBox">
            <el-tabs v-model="activeName" class="scrollVertical" @tab-click="onDemo">
              <el-tab-pane
                v-for="(programItem,inds) in programList"
                :key="inds"
                :label="programItem.TeachingDesignName?programItem.TeachingDesignName:'方案'+(inds+1)"
                :name="String(inds)"
              />
            </el-tabs>
            <el-button class="copyBtn" type="danger" @click="onCopy">复制方案</el-button>
          </div>
        </el-col>
        <el-col :span="4" class="t-center win-atuo fr" >
          <el-button class="posFix" type="primary" @click="onPush">发布</el-button>
        </el-col>
      </el-row>
      <div class="info-wrap">
        <h3 v-show="baseInfoForm.title" class="title">{{ baseInfoForm.title }}</h3>
        <div class="grade padLeft">
          <span v-for="(item , i) in baseInfoForm.categoryVOList" v-show="item" :key="i">{{ ' '+item.itemName }}</span>
        </div>
      </div>
    </div>

    <base-info :id="id" :base-info-form="programItem"  @formBank="formBank"/>
    <yes-program   :key="programItem.id" :program-data="programItem" />

  </div>
</template>
<script>

import { getPersonPrepareLessonDetail, personPrepareLessonPublish, personPrepareLessonCopy, personPrepareLessonDelete } from '@/api/personPrepareLesson'
import baseInfo from './components/baseInfo'
import YesProgram from './components/yesProgram'
import { mapMutations } from 'vuex'
export default {
  components: {
    baseInfo,
    YesProgram
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      typeRole:'',
      hasSaveInfo:false,
      categoryVOList: [],
      baseInfoForm: {},
      programList: [],
      activeName: 0,
      programItem: {},
      oldTabName: ''
    }
  },
  watch: {

  },
  mounted () {
    this._getPersonPrepareLessonDetail()
  },
  created () {
  },

  watch:{
    programItem(baseInfo){
      this.setTeachingPlanId(baseInfo.id)
    }
  },
  methods: {

    ...mapMutations({
      setTeachingPlanId: 'SET_TEACHING_PLAN_ID', // 备课id
      setFirstTeachingPlan: 'SET_FIRST_TEACHING_PLAN'
    }),
    onBack () {
       // 
      if (this.typeRole === 'TRAINER') {

        this.$router.push(`/createResult/uploadLessonPlanTrainer?id=${this.id}`)
      } else {
        this.$router.push(`/createResult/uploadLessonPlan?id=${this.id}`)
      }
    },
    onDemo (tab, e) {
      if (tab.name !== this.oldTabName) {
        this.programItem = this.programList[(tab.name)]
        this.programItem.categoryVOList = this.categoryVOList
      }
      this.ss = tab.name
    },
    onCopy () {
      this.$prompt('请输入模板名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '模板不能为空'
      }).then(async ({ value }) => {
        const { data } = await personPrepareLessonCopy({ teachingDesignId: this.programItem.id, newName: value })
        if (data) this._getPersonPrepareLessonDetail()
      }).catch(() => {
      })
    },
    formBank(refs){
      this.haseSaveInfo = refs
     // refs.validate(val=>this.haseSaveInfo = val)
    },
    onPush () {
      const params = {
        teachingDesignId: this.id
      }
      
     this.haseSaveInfo.$refs.infoform.validate(val=>{
       if(val){
         if(!this.haseSaveInfo.isSave) this.haseSaveInfo.saveBaseInfo()
 this.$confirm('请确定是否已保存和和编辑修改的内容？')
         .then(async _ => {
           const res = await personPrepareLessonPublish(params)
           this.$message.success('发布成功！')
           var hisPage = this.getLoc('hisPage')
           const query = {}
           if (hisPage) {
             if (hisPage === 'createResult') {
               query.tab = 'TEACHING_DESIGN'
             }else{
               hisPage = 'home'
             }
             this.removeLoc('hisPage')
             return this.$router.push({ name: hisPage, query })
           }
           // this.$router.push({
           //   name: 'createResult', params: {
           //     activeTabName: 'TEACHING_DESIGN'
           //   }
           // })
           done()
         })
         .catch(_ => { })
       }

     })

    },
    async _getPersonPrepareLessonDetail () {
      const params = {
        id: this.id
      }
      const res = await getPersonPrepareLessonDetail(params)
      // res = require('@/api/loc/prepareLessonDetails').details
      // console.log("详情",res)
      this.baseInfoForm = res.data.baseInfo
      try{
        this.hasSaveInfo = !res.data.baseInfo.columnTag.groupId&&!res.data.baseInfo.categoryTagList.length
      }catch(err){

      }
     // this.categoryVOList = res.data.baseInfo.categoryVOList
      this.programList = res.data.resList
      this.setFirstTeachingPlan(this.categoryVOList)
      res.data.resList[0].categoryVOList = res.data.baseInfo.categoryVOList

      this.programItem = res.data.resList[0]
     // this.setTeachingPlanId(res.data.baseInfo.id)

    }

  }
}
</script>
<style  lang="scss">
.upTeachDetails {
  .outer-box {
    header.title {
      border-left: 5px solid #299e64;
      padding: 0;
      padding-left: 6px;
      height: auto;
      line-height: 1.5;
      font-size: 16px;
      font-weight: 600;
      margin: 10px 0;
      border-bottom: none;
    }
    .content {
      padding: 10px;
    }
  }

  .scrollVertical {
    height: 60px;
    width: calc(100% - 120px);
    padding: 0 5px;

    [class*="el-tabs__nav-"] {
      line-height: 60px;
    }
    .el-scrollbar__wrap {
      overflow-y: hidden;
    }
    .el-tabs__nav-scroll {
      padding: 0;
      text-align: right;
      .el-tabs__item {
        display: inline-block;
        // line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0 5px;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        height: 40px;
        line-height: 40px;
        padding: 0 20px !important;
        font-size: 14px;
        border-radius: 4px;
        &.is-active {
          color: #fff;
          background-color: #2eb06f;
          border-color: #2eb06f;
        }
        // &:last-child{
        //   padding-right:0;
        // }
        // &:nth-child(2){
        //   padding-left:0;
        // }
      }

      .el-tabs__active-bar {
        display: none;
      }

      // .el-tabs__nav{float: right;}
    }
  }
}
</style>
<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .header-wrap {
    padding-bottom: 24px;
    .backBtn {
      margin: 40px 0 24px 0;
      width: 120px;
    }
    .tabNav,
    .el-tabs__nav-next {
      .copyBtn {
        margin: 10px 8px 0;
      }
      line-height: 60px;
    }
    .info-wrap {
      font-family: MicrosoftYaHei;
      .title {
        font-size: 16px;
        line-height: 24px;
        color: #000;
      }
      .grade {
        font-size: 12px;
        line-height: 24px;
        color: #000;
      }
    }
  }
}
.posFix {
  position: fixed;
  top: 108px;
  right: 45px;
  z-index: 8888;
}
.wrap {
  width: 100%;
  border-radius: 16px;
  background: #fff;
}
</style>
